<template>
  <div class="home">
    <el-row>
      <div id="main" style="width: 100%;height:100vh;background-color: aqua;"></div>
    </el-row>
  </div>
</template>
<script lang="ts">
import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import Feature from 'ol/Feature';
import XYZ from 'ol/source/XYZ';
import VectorSource from 'ol/source/Vector';
import {FullScreen, ScaleLine, Zoom} from "ol/control";
import * as olProj from "ol/proj";
import { Point } from "ol/geom";
import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";

import {Vue,Component} from 'vue-property-decorator';


@Component({
  components: {}
})
export default class Home extends Vue {

  openMap:any;
  mapOptions:any =  {
      mapObj:null,
      mapDom: null,
      mapPointList: [],
      pointLayerSource: null,
      pointLayer: null,
      markerIcon:null
  };
      
  initMap () {
      const scaleLineControl = new ScaleLine({
          className: 'ol-scale-line',
          units: 'metric', // 或者 'imperial' 对于英制单位
          target: 'map', // 默认会添加到地图的 DOM 元素中
      });
            // 创建全屏控件
      const fullScreenControl = new FullScreen({
          source: 'map' // 指定触发全屏的元素，默认为导航栏控件
      });
            //   创建缩放控件
      const zoomControl = new Zoom();
            // 初始化地图配置
        this.mapOptions.mapObj = new Map({
          target: 'main', // 地图容器
          view: new View({
            center: [111.670801 ,40.818311],
            projection:'EPSG:4326',
            zoom: 18
            
          }),
          controls:[scaleLineControl,fullScreenControl,zoomControl]
        })
      // const oldUrl ='http://localhost:8000' + '/{z}/{x}/{y}.png';

      // const url='http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=839f1cdc1e2a0b7dbb0797ab6cc214c5'
    // 
     const url='https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    //   // 添加一个使用离线瓦片地图的层
       const offlineMapLayer = new TileLayer({
        source: new XYZ({
           url: url, // 设置本地离线瓦片所在路径,前面的地址是你输入http-server之后的服务地址
       })
       })


       

    //   // 将图层添加到地图
       this.mapOptions.mapObj.addLayer(offlineMapLayer);
       this.mapOptions.mapObj.addLayer(new VectorLayer({source:new VectorSource({features:
        [new Feature({geometry:new Point([1111.670801 ,40.818311])})]})}));
        this.mapOptions.mapObj.on("singleclick", (e) => {
          // 判断是否点击在点上
          console.log(e)
          let feature = this.mapOptions.mapObj.forEachFeatureAtPixel(
            e.pixel,
            (feature) => feature
          );
          console.log(feature);
        });
     }
     setMarker() {
        let _style = new Style({
          image: new sCircle({
            radius: 2,
            stroke: new Stroke({
              color: "#fff",
            }),
            fill: new Fill({
              color: "#000",
            }),
          }),
        });
        let _feature = new Feature({
          geometry: new Point([1111.670801 ,40.818311]),
          projection:'EPSG:4326'
        });
        _feature.setStyle(_style);
        let _marker = new VectorLayer({
          source: new VectorSource({
            features: [_feature],
          }),
        });
        this.mapOptions.mapObj.addLayer(_marker);
        let a =olProj.fromLonLat([108.945951, 34.465262]);
        console.log(a)
      }



     mounted(){
      this.initMap();

     }
}
</script>

<style scoped lang="scss">
.home {
  .col-item {
    margin-bottom: 20px;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }


  h4 {
    margin-top: 10px;
  }


  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

